<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>post传递参数</h1>
    <table>
        <tr>
            <td>用户名:</td>
            <td><input type="text" id="uname"></td>
        </tr>
        <tr>
            <td>密码:</td>
            <td><input type="password" id="pwd"></td>
        </tr>
        <tr>
            <td><input type="button" value="传递数据-str" onclick="submitForm1()"></td>
            <td><input type="button" value="传递数据-json" onclick="submitForm2()"></td>
        </tr>
    </table>

    <script>
        function submitForm1(){
            //获取input的数据
            let uname = document.getElementById('uname').value
            let pwd = document.getElementById('pwd').value
            //拼接参数
            args = 'uname='+uname+'&pwd='+pwd
            //创建xhr对象
            let xhr = new XMLHttpRequest()
            //设置请求方式与地址
            xhr.open('POST','http://httpbin.org/post')
            //设置请求内容的类型
            xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
            //发送请求
            xhr.send(args)
            //获取响应
            xhr.onload = ()=>{
                console.log(xhr.responseText)
            }
        }
        function submitForm2(){
            //获取input的数据
            let uname = document.getElementById('uname').value
            let pwd = document.getElementById('pwd').value
            //拼接参数
            args = {'uname':uname ,'pwd' : pwd}
            args = JSON.stringify(args)
            //创建xhr对象
            let xhr = new XMLHttpRequest()
            //设置请求方式与地址
            xhr.open('POST','http://httpbin.org/post')
            //设置请求内容的类型
            xhr.setRequestHeader('Content-type','application/json')
            //发送请求
            xhr.send(args)
            //获取响应
            xhr.onload = ()=>{
                console.log(xhr.responseText)
            }
        }

    </script>
</body>
</html>